<template>
<div class="product-detail">
    <!-- 头部区域 -->
    <header class="detail-nav">
        <i class="iconfont icon-left" @click="goback"></i>
        <div class="nav-list">
            <span :class="tag == 0?'active':''" @click="scrollToView(0)">
                <i class="iconfont icon-location" v-if="tag == 0"></i>商品
            </span>
            <span :class="tag == 1?'active':''" @click="scrollToView(1)">
                <i class="iconfont icon-location" v-if="tag == 1"></i>商品详情
            </span>
            <span :class="tag == 2?'active':''" @click="scrollToView(2)">
                <i class="iconfont icon-location" v-if="tag == 2"></i>商品推荐
            </span>
        </div>
        <i class="iconfont icon-More"></i>
    </header>
    <!-- 轮播图 -->
    <section class="product-focus">
        <van-swipe :autoplay="3000" indicator-color="white" class="swiper-container">
            <van-swipe-item v-for="(item,index) in sliderImageList" :key="index">
                <img :src="item" class="swiper_img">
            </van-swipe-item>
        </van-swipe>
    </section>
    <!-- 详情信息 -->
    <section class="detail-info">
        <p class="detail-info-name">{{productDetail.name}}</p>
        <p class="detail-info-subtitle">{{productDetail.subtitle}}</p>
        <div>
            <span class="detail-info-price">￥{{productDetail.price}}</span>
            <span class="detail-info-stock">库存{{productDetail.stock}}件</span>
        </div>
    </section>
    <!-- 商品详情 -->
    <section class="detail-content" ref="detailContent" id="content">
        <p class="detail-gap"></p>
        <ul>
            <li>概述</li>
            <li>参数</li>
            <li>安装服务</li>
            <li>常见问题</li>
        </ul>
        <div class="detail-desc" v-html="productDetail.detail">
        </div>
    </section>
    <section>
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" />
            <van-goods-action-icon icon="cart-o" text="购物车" :info="allCountAndPrice.allCount" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addToCar" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>

        <van-sku @stepper-change = 'valueChange' v-model="show" :sku="sku" :goods="goods" :goods-id="goodsId" :hide-stock="sku.hide_stock" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" />
    </section>
</div>
</template>

<script>
import {
    getProductDetail,
    addCar
} from '@/api'

import {
    mapGetters
} from 'vuex'
export default {
    data() {
        return {
            id: this.$route.params.id,
            tag: 0,
            productDetail: {},
            sliderImageList: [],
            show: false,
            goodsId: 1,
            sku: {
                // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
                // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
                tree: [{
                    k: '颜色', // skuKeyName：规格类目名称
                    v: [{
                            id: '30349', // skuValueId：规格值 id
                            name: '红色', // skuValueName：规格值名称
                            imgUrl: 'http://img.happymmall.com/a52ec7a7-f9b6-40c0-abea-5be1cfba56b2.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                            previewImgUrl: 'http://img.happymmall.com/a52ec7a7-f9b6-40c0-abea-5be1cfba56b2.jpg', // 用于预览显示的规格类目图片
                        },
                        {
                            id: '1215',
                            name: '蓝色',
                            imgUrl: 'http://img.happymmall.com/85622e49-2ff2-4c80-9df5-64424592499d.jpg',
                            previewImgUrl: 'http://img.happymmall.com/85622e49-2ff2-4c80-9df5-64424592499d.jpg',
                        }
                    ],
                    k_s: 's1' // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
                }],
                // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
                list: [{
                        id: 123, // skuId，下单时后端需要
                        price: 12000, // 价格（单位分）
                        s1: '30349', // 规格类目 k_s 为 s1 的对应规格值 id
                        stock_num: 120 // 当前 sku 组合对应的库存
                    },
                    {
                        id: 124, // skuId，下单时后端需要
                        price: 10000, // 价格（单位分）
                        s1: '1215', // 规格类目 k_s 为 s1 的对应规格值 id
                        stock_num: 80 // 当前 sku 组合对应的库存
                    }
                ],
                price: '100', // 默认价格（单位元）
                stock_num: 200, // 商品总库存
                hide_stock: false // 是否隐藏剩余库存
            },
            goods: {
                // 商品标题
                title: '测试商品',
                // 默认商品 sku 缩略图
                picture: 'http://img.happymmall.com/a52ec7a7-f9b6-40c0-abea-5be1cfba56b2.jpg'
            },
            count:1
        }
    },
    created() {
        this.fetchProductDetail()
    },
    computed: mapGetters(['allCountAndPrice']),
    methods: {
        valueChange(value){
            this.count = value
        },
        addToCar() {
            console.log(123)
            this.show = true
        },
        onBuyClicked() {
            console.log('onBuyClicked')
        },
        onAddCartClicked() {
            const params = {
                productId:this.id,
                count:this.count
            }
            addCar(params).then(res=>{
                if(res.status == 0){
                    const goodsA = {
                        id:this.id,
                        count:this.count,
                        price:this.productDetail.price,
                        ischecked:false
                    }
                    const goodsB = {
                        id:Math.random(),
                        imageHost:this.productDetail.imageHost,
                        mainImage:this.productDetail.mainImage,
                        name:this.productDetail.name,
                        subtitle:this.productDetail.subtitle,
                        count:this.count,
                        price:this.productDetail.price,
                    }
                    this.$store.commit('addCars',goodsA)
                    this.$store.commit('pushCar',goodsB)
                    this.$router.push('/shopcart')
                }
            })
        },
        fetchProductDetail() {
            const params = {
                id: this.id
            }
            getProductDetail(params).then(res => {
                console.log(res)
                this.productDetail = res
                let imageList = res.subImages.split(',')
                this.sliderImageList = imageList.map(v => {
                    return res.imageHost + v
                })
            })
        },
        scrollToView(tag) {
            this.tag = tag
            switch (tag) {
                case 0:
                    window.scroll(0, 0)
                    break;
                case 1: {
                    const top = this.$refs.detailContent.offsetTop
                    console.log(top)
                    window.scroll(0, top - 40)
                    break;
                }
                case 2: {
                    window.scroll(0, 0)
                    break;
                }
                default:
                    window.scroll(0, 0)
                    break;
            }
        },
        goback() {
            this.$router.go(-1)
        }
    }
}
</script>

<style lang="scss" scoped>
@import '../../common/style/mixin.scss';

.product-detail {
    width: 100%;

    .detail-nav {
        @include fj;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 88px;
        padding: 0 20px;
        line-height: 88px;
        box-sizing: border-box;
        z-index: 1000;
        color: #252525;
        background: #fff;
        border-bottom: 1px solid #dcdcdc;

        i {
            font-size: 50px;
            color: #000;
        }

        div span {
            padding: 0 20px;
            font-size: 28px;

            &.active {
                color: $red;
            }

            .iconfont {
                padding-right: 8px;
                font-size: 28px;
                color: $red;
            }
        }
    }

    .product-focus {
        margin-top: 88px;

        .swiper-container {
            .swiper_img {
                width: 100%;
                height: 700px;
            }
        }
    }

    .detail-info {
        width: 100%;
        padding: 20px 30px;
        font-size: 30px;
        box-sizing: border-box;

        .detail-info-name {
            font-size: 40px;
            color: #333;
        }

        .detail-info-subtitle {
            padding: 10px 0;
            font-size: 28px;
            color: #999;
        }

        div {
            @include fj;
            height: 70px;
            line-height: 80px;
            padding: 10px 0;
            font-size: 32px;
            color: #999;

            .detail-info-price {
                color: $red;
                font-size: 44px;
            }
        }
    }

    .detail-content {
        width: 100%;

        .detail-gap {
            width: 100%;
            height: 20px;
            background: #eee;
        }

        ul {
            @include fj;
            width: 100%;
            margin: 20px 0;

            li {
                flex: 1;
                padding: 10px 0;
                text-align: center;
                font-size: 30px;
                border-right: 1px solid #999;
                box-sizing: border-box;

                &:last-child {
                    border-right: none;
                }
            }
        }

        .detail-desc /deep/ {
            width: 100%;
            overflow: hidden;

            p {
                width: 100%;
                font-size: 40px;
                text-align: center;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }
    }
}

// 父组件中改不了子组件的样式或者v-html渲染的内容需要修改样式 都需要使用深度作用选择器
// 在使用第三方组件时，如果发现修改不了第三方组件的样式，就可以使用深度作用选择器
// less或scss中使用: 父组件选择器 /deep/ 子组件选择器
// 普通css中使用: 父组件选择器 >>> 子组件选择器
</style>
